/* * @Author: hhy * @Date: 2019-01-30 14:11:45 * @Last Modified by: chenjie *
@Last Modified time: 2019-08-05 10:58:33 * @文件说明: echarts组件 */
<template>
  <div class="h-echarts" ref="hEcharts" id="hEcharts" :style="style" />
</template>

<script>
import echarts from "echarts";
export default {
  name: "h-echarts",
  props: {
    width: {
      type: String,
      default: "700",
    },
    height: {
      type: String,
      default: "500",
    },
    option: {
      type: Array,
      default() {
        return [];
      },
    },
    color: {
      type: String,
      default() {
        return "#7DB6EF";
      },
    },
    name: {
      type: String,
      default() {
        return "票数";
      },
    },
  },
  computed: {
    style() {
      return {
        width: this.width.match("%") ? this.width : this.width + "px",
        height: this.height + "px",
      };
    },
  },
  mounted() {
    let AllData = [];
    let textName = this.name;
    this.option.map((o) => {
      AllData.push({
        value: o.value,
        name: o.name,
      });
    });
    const option = {
      color: ["#FF0000", "#CC9900", "#66CC00", "#FFFF00", "#FF9900", "#FFCC00"],
      grid: {
        top: "-10%",
        containLabel: true,
      },
      tooltip: {
        trigger: "item",
      },

      series: [
        {
          name: textName,
          type: "pie",
          radius: "50%",
          data: AllData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(this.$refs.hEcharts);
    // 绘制图表
    myChart.setOption(option);
  },
};
</script>
